<template>
    <div class="page-content">
        <div class="comm-content" ref="box"></div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            myEcharts: null
        }
    },
    computed:{
        themeStatus(){
            return this.$store.state.theme
        }
    },
    watch:{
        themeStatus(){
            this.myEcharts.dispose()
            this.initEcharts()
            this.getdata()
            this.screen()
        }
    },
    mounted() {
        this.initEcharts()
        this.getdata()
        window.addEventListener('resize', this.screen)
        this.screen()
    },
    destroyed(){
        window.removeEventListener('reset',this.screen)
    },
    methods: {
        // 屏幕适配
        screen() {
            console.log(1);
            this.myEcharts.resize()
            let width = this.$refs.box.offsetWidth
            let num = width / 100 * 2.5
            let innerRadius = num * 2
            let outerRadius = innerRadius * 1.3
            let seriesRadius = [1, 2, 3, 4].map(item => {
                return {
                    radius: [innerRadius, outerRadius],
                    label: {
                        fontSize: num
                    }
                }
            })
            let options = {
                title: {
                    textStyle: {
                        fontSize: num
                    }
                },
                series: seriesRadius
            }
            this.myEcharts.setOption(options)
        },
        initEcharts() {
            let box = this.$refs.box
            this.myEcharts = this.$echarts.init(box,this.themeStatus)
            let options = {
                title: {
                    text: '主要地区农作物种植区域占比'
                }
            }
            this.myEcharts.setOption(options)
        },
        async getdata() {
            let dataList = await this.$http('/api/cropAreasProportion')
            let centerList = [
                ['15.5%', '50%'],
                ['40.5%', '50%'],
                ['63.5%', '50%'],
                ['85.5%', '50%']
            ]
            let seriesData = dataList.data.map((item, index) => {
                return {
                    type: 'pie',
                    center: centerList[index],
                    radius: [50, 70],
                    label: {
                        show: true,
                        position: 'center',
                        fontSize: 30
                    },
                    data: [
                        {
                            name: item.areas + '\n' + item.zb + '%',
                            value: item.zb
                        },
                        {
                            value: item.other
                        }
                    ]
                }
            })
            console.log(seriesData);
            this.setEcharts(seriesData)
        },
        setEcharts(seriesData) {
            let options = {
                series: seriesData
            }
            this.myEcharts.setOption(options)
            this.screen()
        }
    },


}
</script>
<style scoped></style>